<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加购物车动画</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }

        html, body {
          height: 100%;
        }

        @keyframes moveX {
            to {
                transform: translateX(var(--x));
            }
        }

        @keyframes moveY {
            to {
                transform: translateY(var(--y));
            }
        }
        .plus {
            position: fixed;
            top: var(--top);
            left: var(--left);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            animation: moveY .8s cubic-bezier(0.5, -0.5, 1, 1);
        }

        .plus-icon {
            width: 100%;
            height: 100%;
            background-color: #5151e7;
            border-radius: 50%;
            animation: moveX .8s linear;
        }

        .plus-icon::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 3px;
            width: 4px;
            height: 24px;
            margin-left: -2px;
            background-color: white;
            border-radius: 8px;
        }

        .plus-icon::after {
            content: "";
            position: absolute;
            left: 3px;
            top: 50%;
            width: 24px;
            height: 4px;
            margin-top: -2px;
            background-color: white;
            border-radius: 8px;
        }

        .car {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            right: 240px;
            bottom: 100px;
            color: white;
            border-radius: 50%;
            background-color: #5151e7;
        }

        button {
            border: 0;
            background-color: #5151e7;
            border-radius: 10px;
            position: fixed;
            top: 100px;
            right: 20px;
            color: white;
            padding: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button>加入购物车</button>
    <div class="car">购</div>

    <!-- <div class="plus">
        <div class="plus-icon"></div>
    </div> -->

    <script>
        const btn = document.querySelector('button');
        const car = document.querySelector('.car');
        const PLUS_SIZE = 30;
        btn.onclick = () => {
            const box = document.createElement('div');
            box.className = 'plus';
            box.innerHTML = `<div class="plus-icon"></div>`;

            const btnRect = btn.getBoundingClientRect();
            const left = btnRect.left + (btnRect.width / 2) - (PLUS_SIZE / 2);
            const top = btnRect.top - PLUS_SIZE;

            const carRect = car.getBoundingClientRect();
            const x = carRect.left + (carRect.width / 2) - (PLUS_SIZE / 2) - left;
            const y = carRect.top - PLUS_SIZE - top;

            box.style.setProperty('--left', `${left}px`);
            box.style.setProperty('--top', `${top}px`);
            box.style.setProperty('--x', `${x}px`);
            box.style.setProperty('--y', `${y}px`);

            box.addEventListener('animationend', () => {
                box.remove();
            })
            document.body.appendChild(box);
        }
    </script>
</body>
</html>